<template>
	<!-- 公共标题 -->
	<div class="text-white title-box flex-between">
		<div class="flex align-end">
			<div class="title-content">{{title}}</div>
			<div class="margin-left" style="z-index: 3;">
				<slot name="left"></slot>
			</div>
		</div>
		<div style="position: relative; z-index: 2; color: #35d9d9;">
			<slot name="right"></slot>
		</div>
	</div>
</template>

<script setup>
	const props = defineProps({
		title: {
			type: String,
			default: '',
		},
	});
</script>

<style scoped lang="scss">
	.title-box {
		height: 40px;
		line-height: 38px;
		position: relative;

		.title-content {
			position: relative;
			padding-left: 50px;
			font-size: 20px;
			font-weight: 700;
			height: 40px;
			padding-right: 60px;
			background-image: url('@/assets/images/title-bg.png');
			background-repeat: no-repeat;
			background-size: 100% 40px;
			z-index: 2;
		}

		&::after {
			position: absolute;
			left: 50px;
			right: 0;
			top: 5px;
			bottom: 0;
			background-image: linear-gradient(45deg, #0e58a7, #0b2553);
			z-index: 0;
			border-bottom: 2px solid #2a93e3;
			content: ''; 
			z-index: 0;
		}

	}
</style>